<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
	<head>
		<title>JavaScript Objecet-Oriented Inherited</title>
		<style type="text/css">
			div#header {
				color: #0066FF;
				font-size: 25pt;
			}
			
			div#content {
				color: #B088FF;
				font-size: 12pt;
			}
			
			div[title~="content"] {
				color: red;
			}
			
			span.dynamicText {
				color: brown;
			}
		</style>
		
		<!-- embed jquery by google，藉由google嵌入jquery 1.4.4 -->
		<script type="text/javascript" src="http://www.google.com/jsapi"></script>
		<script type="text/javascript" language="javascript">
			google.load( "jquery", "1.4.4" );
		</script>
		<script type="text/javascript">
			$( document ).ready( function() {
				// alert( "google jquery!" );
				
				var Father = function() {
					this.fatherName = "John Coltrane";
					this.fatherNickName = "Trane";
					this.play = function() {
						alert( "Moment's Notice... " );
					};
				};
				
				var Son = function() {
					this.super = Father;
					this.super();
					
					this.sonName = "Ravi Cotrane";
					this.sonNickName = "Ravi";
					this.play = function() {
						alert( "play funk... " );
					};
				};
				Son.prototype = Father;
				
				var baseInstance = new Father();
				/*
				alert(
					"baseInstance.fatherName: " + baseInstance.fatherName + "\n" +
					"baseInstance.fatherNickName: " + baseInstance.fatherNickName + "\n" +
					"baseInstance.play: " + baseInstance.play
				);
				*/
				
				var $fatherDiv = $( 'div[title~="father"]' )
				var fatherDivContent = $fatherDiv.html();
				$fatherDiv.html(
					"<span class='dynamicText'>" + 
						fatherDivContent + baseInstance.fatherName + "<br />" + 
						"Father's nickname is " + baseInstance.fatherNickName + "<br />" + 
						"Father's play funciotn is " + baseInstance.play + 
					"</span>"
				);
				
				var derivedInstance = new Son();
				/*
				alert(
					"derivedInstance.sonName: " + derivedInstance.sonName + "\n" +
					"derivedInstance.sonNickName: " + derivedInstance.sonNickName + "\n" +
					"derivedInstance.play: " + derivedInstance.play
				);
				*/
				
				var $sonDiv = $( 'div[title~="son"]' )
				var sonDivContent = $sonDiv.html();
				$sonDiv.html(
					"<span class='dynamicText'>" + 
						sonDivContent + derivedInstance.sonName + "<br />" + 
						"Son's nickname is " + derivedInstance.sonNickName + "<br />" + 
						"Son's play funciotn is " + derivedInstance.play + "<br />" + 
						"Father's name is " + derivedInstance.fatherName + "<br />" + 
						"Father's nickname is " + derivedInstance.fatherNickName + 
					"</span>"
				);
				
				if( derivedInstance === Son.prototype.constructor  ) {
					alert( "\"derivedInstance === Son.prototype.constructor \" is true" );
				} else {
					alert( "\"derivedInstance === Son.prototype.constructor \" is false" );
				}
				
				if( derivedInstance === Father.prototype.constructor  ) {
					alert( "\"derivedInstance === Father.prototype.constructor \" is true" );
				} else {
					alert( "\"derivedInstance === Father.prototype.constructor \" is false" );
				}
				
				var base = new Father();
				if(	base.constructor === Father ) {
					alert( "\"base.constructor == Father\" is true" );
				} else {
					alert( "\"base.constructor == Father\" is false" );
				}
				
				
			});
		</script>
		
	</head>
	
	<body>
		<div title="temp1" id="header">Hello HTML</div>
		<div title="temp1" id="content">
			<div title="father content">
				The Father is
			</div>
			<br />
			<div title="son content">
				The Son is 
			</div>
		</div>
	</body>
</html>